<template>
  <div class="data">
    <van-nav-bar
      title="个人修改资料"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-image
      height="235px"
      fit="contain"
      src="https://img1.baidu.com/it/u=382617866,750091850&fm=253&fmt=auto&app=120&f=JPEG?w=790&h=494"
    >
      <van-image
        round
        width="75px"
        height="75px"
        src="https://img2.baidu.com/it/u=784719223,2785620759&fm=253&fmt=auto&app=138&f=JPEG?w=641&h=481"
      />
    </van-image>
    <div class="content">
      <van-cell-group>
        <van-field
          v-model="user_name"
          label="用户名称:"
          placeholder="请输入用户名"
        />
      </van-cell-group>
      <!-- <a href="#" class="content2" style="color: pink;">
        <van-icon name="friends-o"  style="font-size: 25px; margin-left: 10px;"/>
        <span style="color:#000; margin-left: 10px;">性别</span>
        <span style="font-size: 16px; margin-left: 244px; color: gray;">男</span>
        <span style="color: gray; margin-left: 10px;">&gt;</span>
      </a> -->
      <van-field
        v-model="fieldValue"
        is-link
        readonly
        placeholder="男"
        @click="show = true"
      >
        <template #label>
          <div>
            <span>性别</span>
          </div>
        </template>
      </van-field>

      <van-popup
        v-model="show"
        round
        position="bottom"
      >
        <van-cascader
          v-model="cascaderValue"
          title="性别"
          :options="options"
          @close="show = false"
          @finish="onFinish"
        />
      </van-popup>
      <van-button
        type="default"
        size="large"
        @click="initData"
        >保存</van-button
      >
      <van-button
        type="default"
        size="large"
        color="skyblue"
        @click="noLogin"
        >退出登录</van-button
      >
    </div>
  </div>
</template>
<script>
import { Toast } from 'vant';
export default {
  data() {
    return {
      user_name: '',
      show: false,
      fieldValue: '',
      cascaderValue: '',
      // 选项列表，children 代表子选项，支持多级嵌套
      options: [
        {
          text: '男',
          value: '1',
        },
        {
          text: '女',
          value: '0',
        },
      ],
    };
  },
  methods: {
    // 全部选项选择完毕后，会触发 finish 事件
    onFinish({ selectedOptions }) {
      this.show = false;
      this.fieldValue = selectedOptions.map((option) => option.text).join('/');
    },
    async initData() {
      const user = { user_name: this.user_name, user_sex: this.cascaderValue };
      const res = await this.$http.usersNema(user, this.$store.state.user.user.id);
      const {
        data: { code },
      } = res;
      if (code == 0) {
        Toast('修改成功');
      }
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    noLogin() {
      localStorage.setItem('token', []);
      localStorage.setItem('user', []);
      Toast('退出登录成功');
      this.$router.push('/');
    },
  },
};
</script>
<style lang="scss">
body {
  background-color: #fafafa;
}
.data {
  .van-nav-bar {
    .van-nav-bar__arrow {
      font-size: 25px;
    }
  }
  .van-image {
    .van-image--round {
      position: absolute;
      top: 60px;
      left: 155px;
    }
  }
  .content {
    width: 100%;
    height: 175px;
    // background-color: pink;
    margin-top: 5px;
  }
  .content1 {
    width: 100%;
    height: 50px;
    background-color: #fff;
    display: block;
    margin-bottom: 10px;
    line-height: 50px;
  }
  .van-field {
    img {
      width: 64px;
      height: 36px;
    }

    .van-cell__title div {
      width: 36px;
      height: 48px;
    }
    .van-field__label {
      width: 77px;
      height: 36px;
      font-size: 18px;
      color: #000;
    }
    input::-webkit-input-placeholder {
      color: #000;
      font-size: 18px;
      width: 50px;
    }
    .van-field__body {
      width: 200px;
      display: block;
    }
    .van-cell__right-icon {
      margin-right: 16px;
      margin-top: 15px;
    }
    .van-field__control {
      font-size: 18px;
    }
  }
  // .content3 {
  //   width: 100%;
  //   height: 50px;
  //   background-color: #fff;
  //   line-height: 50px;
  //   text-align: center;
  //   font-size: 20px;
  // }
  .van-cell-group {
    margin-bottom: 10px;
  }
  .van-cell {
    height: 50px;
    // background-color: pink;
    line-height: 50px;
    padding: 0 0;
    margin-bottom: 10px;
  }
}
</style>
